<!--组件.vue-->
<script setup lang="ts">
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import { ref, toRefs } from 'vue'

const isScroll = ref(true)

const props = defineProps({
  listData: Array,
});
const { listData } = toRefs(props)

</script>
<template>
  <div class="contain">
    <div class="monitor panel">
      <div style="height: 95%;overflow: hidden;">
        <div class="content" style="display: block;">
          <div class="head">
            <span class="col" style="width: 15%;">设备名称</span>
            <span class="col" style="width: 15%;">任务状态</span>
            <span class="col" style="width: 35%;">任务开始时间</span>
            <span class="col" style="width: 35%;">任务结束时间</span>
          </div>
        </div>
        <div class="seamlessRolling">
          <!-- <div class="maps">
            <img src="@/assets/images/lbx.png" alt="" class="map">
            <img src="@/assets/images/jt.png" alt="" class="map1">
            <img src="@/assets/images/map.png" alt="" class="map2">
          </div> -->
          <Vue3SeamlessScroll class="scroll" v-model="isScroll" :list="listData" :step="0.3" :hover="true"
            :limit-scroll-num="3" :wheel="true" :key="listData.length">
            <ul>
              <li v-for="(item, index) in listData" :key="index" class="row">
                <span class="col" style="width: 15%;">{{ item.equipName ? item.equipName : 'null' }}</span>
                <span class="col" style="width: 15%;">{{ "完成" }}</span>
                <span class="col" style="width: 35%;">{{ item.taskStartTime }}</span>
                <span class="col" style="width: 35%;">{{ item.taskEndTime }}</span>
              </li>
            </ul>
          </Vue3SeamlessScroll>
        </div>
      </div>
    </div>

  </div>
</template>
<style lang='less' scoped>
.contain {
  width: 97%;
  margin: 10px auto;
  height: 320px;
  overflow: hidden;
  background-size: 100% 100%;
}

.seamlessRolling {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-shadow: 0 0 25px #00fbfe;
  position: relative;

  .maps {
    // position: absolute;
    // width: 100%;
    // height: 100%;

    .map {
      position: absolute;
      top: 5%;
      left: 35%;
      width: 30rem;
      animation: myfirst 10s infinite linear;
    }

    .map1 {
      position: absolute;
      top: 6%;
      left: 38%;
      width: 26rem;
      animation: myfirst 10s infinite linear;
      z-index: 9;
    }

    .map2 {
      position: absolute;
      top: 7%;
      left: 38%;
      width: 25rem;
      animation: myfirst 10s infinite linear;
      opacity: .7;
    }
  }



  .row:nth-child(odd) {
    color: #ffffff;
  }

  .row:nth-child(even) {
    color: #ffffff;
    background-color: #284651;
    border-radius: 30px;
  }
}

/* 监控 */
.monitor {
  box-sizing: border-box;
}

.monitor .content {
  flex: 1;
  display: none;
  position: relative;
}

.monitor .head {
  background: #206687;
  font-size: 16px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
  text-align: center;
  color: #ffffff !important;
  text-shadow: 0 0 25px #00fbfe;
  border-radius: 30px;
}

.monitor .row {
  line-height: 1.05;
  padding: 10px;
  font-size: 16px;
  position: relative;
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
}

.monitor .row:hover {
  background: rgba(255, 255, 255, 0.1);
}


@media screen and (min-width: 2000px) {
  html {
    font-size: 40px;
  }
}

@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-359deg);
  }
}

.on {
  background-color: green;
  padding: 5px 10px;
  color: #fff !important;
  border-radius: 3px;
}

.off {
  background-color: red;
  padding: 5px 10px;
  color: #fff !important;
  border-radius: 3px;
}

.green {
  color: green;
}

.bgdccc {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #ccc;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
}

.bgdref {
  width: 1.5rem;
  height: 1.5rem;
  background-color: red;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
}
</style>